<template>
    <UxDialog :visible.sync="dialog" @close="dialog.cancel()">

        <div class="store-notify" v-if="dialog">

            <!-- 吊牌绑定 -->
            <template v-if="dialog.type == 'tag' && /bind|update/.test(dialog.action)">
                <figure><img src="https://img.podpartner.com/static/images-20230202/brand/connect-store-bind.png"
                        alt=""></figure>
                <p>
                    <strong>Are you sure you want to link the hang tag to this store?</strong>
                    <span>If so, the hang tag will be used for all the products published to the store at a cost of
                        <CommonLevelDiscount :price="option.brand.total_price" :level="userInfo.level"
                            type="unit|discount" /> each.
                    </span>
                </p>
            </template>

            <!-- 吊牌解绑 -->
            <template v-if="dialog.type == 'tag' && /untie/.test(dialog.action)">
                <figure><img src="https://img.podpartner.com/static/images-20230202/brand/connect-store-untie.png"
                        alt=""></figure>
                <p>
                    <strong>Are you sure you want to unlink the hang tag from this store?</strong>
                    <span>If yes, the products in this store using the current hang tag will be packed without a hang
                        tag, and you won't be charged extra.</span>
                </p>
            </template>


            <!-- 包装袋绑定 -->
            <template v-if="dialog.type == 'pack' && /bind|update/.test(dialog.action)">
                <figure><img src="https://img.podpartner.com/static/images-20230202/brand/connect-store-bind.png"
                        alt=""></figure>
                <p>
                    <strong>Are you sure you want to link the packaging bag to this store?</strong>
                    <span>If so, the packaging bag will be used for all the products published to the store at a cost of
                        <CommonLevelDiscount :price="option.brand.total_price" :level="userInfo.level"
                            type="unit|discount" /> each.
                    </span>
                </p>
            </template>

            <!-- 包装袋解绑 -->
            <template v-if="dialog.type == 'pack' && /untie/.test(dialog.action)">
                <figure><img src="https://img.podpartner.com/static/images-20230202/brand/connect-store-untie.png"
                        alt=""></figure>
                <p>
                    <strong>Are you sure you want to unlink the packaging bag from this store?</strong>
                    <span>If yes, the products in this store using the current packaging bag will be packed with our
                        original free packaging bags</span>
                </p>
            </template>



            <template v-if="dialog.action == 'untie'">
                <button @click="dialog.confirm()">Confirm</button>
                <button @click="dialog.cancel()" type="primary">Cancel</button>
            </template>

            <template v-else>
                <button @click="dialog.confirm()" type="primary">Confirm</button>
                <button @click="dialog.cancel()">Cancel</button>
            </template>

            <UxLoading2 :loading="loading" />

        </div>
    </UxDialog>
</template>
<script>
import { mapGetters, mapState } from "vuex";

export default {
    name: "BrandingBindProductNotify",
    props: {
        option: { type: Object, default: () => { return null } },
    },
    data () {
        return {
            loading: false,
            dialog: null,
        }
    },
    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
    },
    watch: {
        option () {
            this.checkDisplayed();
        }
    },
    methods: {

        // 解绑
        untieStore (type) {

            const requestName = { 'tag': 'tag_design_id', 'pack': 'packaging_id' }[type];
            const brandName = { 'tag': 'tag_design_id', 'pack': 'pack_design_id' }[type];
            const apiname = { 'tag': 'BrandHangtag.untieStore', 'pack': 'BrandPackage.untieStore' }[type]
            const store = this.option.store || {};

            const request = {
                shop_id: store.id,
                [requestName]: store[brandName]
            }

            this.loading = true;
            return this.$http(apiname, request).then(response => {
                if (response.code == 0) {
                    this.loading = false;
                    return Promise.resolve();
                } else {
                    this.loading = false;
                    return Promise.reject();
                }
            });

        },

        // 绑定
        bindStore (type) {

            const brandName = { 'tag': 'tag_design_id', 'pack': 'packaging_id' }[type];
            const apiname = { 'tag': 'BrandHangtag.bindStore', 'pack': 'BrandPackage.bindStore' }[type]
            const store = this.option.store || {};
            const brand = this.option.brand;
            const request = {
                shop_id: store.id,
                [brandName]: brand.id
            }

            this.loading = true;
            return this.$http(apiname, request).then(response => {
                if (response.code == 0) {
                    this.loading = false;
                    return Promise.resolve();
                } else {
                    this.loading = false;
                    return Promise.reject();
                }
            });
        },

        // 打开对话框
        openDialog (type, action) {

            return new Promise((resolve, reject) => {
                this.dialog = {
                    type: type,
                    action: action,
                    cancel: reject,
                    confirm: () => {

                        if (action == 'bind') {
                            this.bindStore(type).then(() => {
                                this.$uxMessage.success("Successfully linked.");
                                resolve();
                            }).catch(() => {
                                this.$uxMessage.warning("Failed to linked.");
                                reject();
                            })
                        } else if (action == 'untie') {
                            this.untieStore(type).then(() => {
                                this.$uxMessage.success("Successfully unlinked.");
                                resolve();
                            }).catch(() => {
                                this.$uxMessage.warning("Failed to unlinked.");
                                reject();
                            })
                        } else if (action == 'update') {
                            this.untieStore(type).then((res) => this.bindStore(type)).then(() => {
                                this.$uxMessage.success("Successfully update.");
                                resolve();
                            }).catch(() => {
                                this.$uxMessage.warning("Failed to update.");
                                reject();
                            })
                        }
                    },
                }
            })
        },

        checkDisplayed () {

            const idName = { tag: 'tag_design_id', pack: 'pack_design_id' }[this.option.type];
            const type = this.option.type;
            const store = this.option.store || {};
            const brand = this.option.brand;
            const brandid = store[idName];




            if (brandid) {
                if (!brand) {
                    // 解绑
                    this.openDialog(type, 'untie').then(res => {
                        const result = {
                            ...store,
                            [idName]: 0
                        }
                        this.$emit('success', result)
                    }).catch(error => {
                        this.$emit('close', null);
                    })

                } else if (brand.id != brandid) {

                    // 换绑
                    this.openDialog(type, 'update').then(res => {
                        const result = {
                            ...store,
                            [idName]: brand.id
                        }
                        this.$emit('success', result)
                    }).catch(error => {
                        this.$emit('close', null);
                    })

                } else {
                    // id相同，不管
                    this.$emit('close')
                }
            } else if (brand) {
                // store 没有值，品牌上有值，则表示绑定
                this.openDialog(type, 'bind').then(res => {
                    const result = {
                        ...store,
                        [idName]: brand.id
                    }
                    this.$emit('success', result)
                }).catch(error => {
                    this.$emit('close', null);
                })
            } else {
                this.$emit('close', null);
            }
        }
    },
    created () {
        this.checkDisplayed();
    },
}
</script>
<style scoped lang="scss">
.store-notify {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
    height: 412px;
    box-sizing: border-box;
    padding: 40px 20px 26px;

    &>.loading {
        border-radius: 10px;
    }

    figure {
        width: 80px;
        height: 80px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        strong {
            display: block;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
        }

        span {
            display: block;
            margin-top: 10px;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
        }
        .level-discount::v-deep {
            font-size: 14px;
            color: #000000;

            span {
                margin: 0;
            }
        }
    }

    button {
        width: 100%;
        margin-top: 10px;
    }

    label {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 24px;
        font-size: 14px;
        color: #000000;
        line-height: 14px;
        margin: 0 0 10px;
        position: relative;
        cursor: pointer;

        input {
            position: absolute;
            width: 0;
            height: 0;

            &:checked+i {
                border-color: #ea4c89;
                background-color: #ea4c89;
                text-indent: -1px;
                color: #fff;
            }
        }

        i {
            display: inline-block;
            vertical-align: top;
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            background: #ffffff;
            border-radius: 2px;
            margin-right: 8px;
            border: 2px solid #919191;
            font-size: 14px;
            text-align: center;
            line-height: 12px;
            text-indent: -99em;
            overflow: hidden;
        }

        span {
            display: inline-block;
            vertical-align: top;
            line-height: 24px;
        }
    }
}
</style>
